<template>
    <div class="notice">
        <top></top>
        <mall-header></mall-header>
        <div class="notice_propaganda"></div>
        <div class="w1200">
            <div class="notice_title">最新中标</div>
            <div class="notice_search">
                <a-form-model ref="form" :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                    <a-row>
                        <a-col :span="8">
                            <a-form-model-item label="项目名称" prop="sectionName" style="margin-bottom: 10px;">
                                <a-input v-model="form.sectionName" placeholder="请输入项目名称" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-model-item label="中标时间" prop="basBeginTime" style="margin-bottom: 10px;">
                                <a-range-picker value-format="YYYY-MM-DD HH:mm:ss" show-time :placeholder="['开始时间', '结束时间']"
                                    v-model="form.basBeginTime" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="8" style="text-align: right;margin-top: 4px;">
                            <a-button icon="reload" @click="resetForm">重置</a-button>
                            <a-button type="danger" icon="search" @click="searchData">查询</a-button>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="8">
                            <a-form-model-item label="中标金额" prop="minPrice" style="margin-bottom: 0;">
                                <div style="display: flex;align-items: center">
                                    <a-input-number :precision="2" v-model="form.minPrice" style="flex: 1;"
                                        placeholder="最低中标金额" />
                                    <div style="margin: 0 4px;">~</div>
                                    <a-input-number :precision="2" :min="form.minPrice" v-model="form.maxPrice"
                                        style="flex: 1;" placeholder="最高中标金额" />
                                </div>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                </a-form-model>
            </div>
            <a-table class="MT20 my-table" :tableLoading="loading" rowKey="id" :columns="columns" :dataSource="data"
                :pagination="false" size="middle">
                <template slot="operation" slot-scope="text,record">
                    <template v-if="isLogin">
                        <a-button type="link" style="padding: 0;" @click="toDetail(record.url)">查看标讯详情</a-button>
                        <a-divider type="vertical" />
                        <a-button type="link" style="padding: 0;" @click="toSupplier(record.supplierCode)">查看供应商</a-button>
                    </template>
                    <template v-else>
                        <a-button type="link" style="padding: 0;" @click="toLogin()">登录查看更多</a-button>
                    </template>
                </template>
                <template slot="money" slot-scope="text">¥{{ text | money }}</template>
                <template slot="name" slot-scope="text">
                    <template v-if="text && text.length > 0">
                        <template v-if="isLogin">{{ text }}</template>
                        <template v-else>{{ text[0] }}**</template>
                    </template>
                </template>
            </a-table>
            <a-row type="flex" align="middle" class="MT20" :style="{ 'margin-right': paging.total > paging.pageSize ? '-8px' : 0 }">
                <a-col flex="1">
                    共 {{ paging.total }} 个结果 第 {{ paging.current }} /
                    {{ Math.ceil(paging.total / paging.pageSize) }} 页
                </a-col>
                <a-col>
                    <a-pagination :total="paging.total" :pageSize="paging.pageSize" v-model="paging.current"
                        show-quick-jumper show-size-changer :page-size-options="['10', '20', '50']"
                        @showSizeChange="onShowSizeChange" @change="pageChange" />
                </a-col>
            </a-row>
        </div>
    </div>
</template>
  
<script>
import { appConfig } from '@/config/app'
import storage from '@/utils/storage'
import Top from '@/components/base/Top.vue'
import MallHeader from '@/components/base/MallHeader.vue'
import { listPage } from '@/api/portal'

const columns = [
    {
        title: '项目名称',
        dataIndex: 'sectionName',
        width: '300px'
    },
    {
        title: '项目发布人',
        dataIndex: 'purchaserName',
        scopedSlots: { customRender: 'name' },
    },
    {
        title: '中标人',
        dataIndex: 'winnerName',
        scopedSlots: { customRender: 'name' },
    },
    {
        title: '中标金额',
        dataIndex: 'bidAmount',
        scopedSlots: { customRender: 'money' }
    },
    {
        title: '中标时间',
        dataIndex: 'bidTime'
    },
    {
        title: '操作',
        dataIndex: 'operation',
        scopedSlots: { customRender: 'operation' },
        width: '220px'
    },
]
export default {
    name: "latestNotice",
    components: {
        Top,
        MallHeader
    },
    data() {
        return {
            columns,
            form: {
                sectionName: '',
                minPrice: undefined,
                maxPrice: undefined,
                startTime: undefined
            },
            data: [],
            loading: false,
            paging: {
                total: 0,
                current: 1,
                pageSize: 10
            },
            isLogin: storage.session.get('isLogin') && storage.session.get('authToken'),

        }
    },
    mounted() {
        // if (this.$route.query.searchWords) {
        //     this.form.sectionName = this.$route.query.searchWords
        // }
        // this.$eventHub.$on('onSearch', values => {
        //     this.form.sectionName = values.searchWords || ''
        //     this.searchData()
        // })
        this.loadData()
    },
    computed: {
    },
    methods: {
        loadData() {
            if (this.loading) return
            this.loading = true
            const params = JSON.parse(JSON.stringify(this.form))
            if (params.basBeginTime && params.basBeginTime.length > 0) {
                if (params.basBeginTime.length > 1) {
                    params.basEndTime = params.basBeginTime[1]
                }
                params.basBeginTime = params.basBeginTime[0]
            }
            listPage({
                    page: this.paging.current,
                    limit: this.paging.pageSize,
                    ...params
                }).then(res => {
                this.loading = false
                if (res.code === 0) {
                    this.data = res.data.records || []
                    this.paging.total = Number(res.data.total)
                }
            }).catch(() => {
                this.loading = false
            })
      
        },
        onShowSizeChange(page, pageSize) {
            this.paging.pageSize = pageSize
            this.searchData()
        },
        pageChange(page, pageSize) {
            this.paging.current = page
            this.loadData()
        },
        resetForm() {
            if (this.loading) return
            this.$refs.form.resetFields()
            this.form.maxPrice = undefined
            this.loadData()
        },
        searchData() {
            if (this.loading) return
            this.paging.current = 1
            this.loadData()
        },
        toDetail(url) {
            if (url) {
                window.open(url, '_blank')
            } else {
                this.$message.info('暂无跳转链接')
            }
        },
        toLogin() {
            window.location.href = appConfig.purLoginUrl;
        },
        toSupplier(id) {
            if (!id) {
                this.$message.error('供应商信息不完整')
                return
            }
            this.$router.push({
                path: "/plantDetails",
                query: {
                    id: id,
                },
            });
        }
    }
}
</script>
  
<style scoped lang="scss">
.notice {
    background: #f5f5f5;

    &_propaganda {
        width: 100%;
        height: 200px;
        background-image: url("../../assets/images/supplierDisplayCenter/noticeBg.png");
        background-size: cover;
        background-position: center;
    }

    &_title {
        font-family: PingFangSC-Regular, sans-serif;
        font-size: 14px;
        font-weight: normal;

        color: #323232;
        margin-top: 20px;
        margin-bottom: 10px;
    }

    &_search {
        border-radius: 4px;
        padding: 20px;
        width: 100%;

        background: #FFFFFF;
    }
}

.my-table {
    background-color: white;

    /deep/ th {
        background-color: rgba(0, 0, 0, 0.06);
    }
}
</style>
  